<template>
    <div class="container">
        <div class="main">
            <div class="login-box">
                <div class="title-box-login">
                    <span class="title">管理员登陆</span>
                </div>
                
                <div class="edit-main">
                    <div class="edit-box">
                        <img class="icon" src="../assets/images/account.png">
                        <div class="boder-one" />
                        <input class="input" v-model="username" placeholder="请输入账号">
                    </div>
                    
                    <div class="edit-box">
                        <img class="icon" src="../assets/images/password.png">
                        <div class="boder-one" />
                        <input class="input" v-model="password" type="password" placeholder="请输入密码">
                    </div>
					<div class="remember">
						<el-checkbox v-model="isRemember">记住密码</el-checkbox>
					</div>
					
                    <el-button class="login-btn" @click="event().onLogin()">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {encrypt} from '@/filters/filter'
    import {login} from '@/api/common'
    import Utils from '@/jslibs/utils'
    import {mapMutations,mapActions} from 'vuex'
    export default {
        data() {
            return {
				isRemember:false,
                code: '',
                inputCode: '',
                username: '',
                password: '',
                rules: [],
                permissionList: [],         //菜单权限列表
                operationList: [{           //三级权限
                    name: '样例管理',
                    operations: ['编辑', '删除', '导出'],
                }],
            };
        },
		created() {
			const username = localStorage.getItem('username');
			const password = localStorage.getItem('password');
			const isRemember = localStorage.getItem('isRemember');
			this.username = username || '';
            this.password = password || '';
			this.isRemember = !!isRemember ? true : false
		},

        methods: {
            ...mapMutations(['update_permisison_list', 'update_operation_list']),
            event() {
                return {
                    onLogin: () => {//登录
                        this.network().addlogin()
                    },
                };
            },
            
            network() {
                return {
                    /*  getListA() {},登录 */ 
                    addlogin: async () => {
                        if (!this.handler().verifyInput()) return
                        const {status, data} = await login({
                            username: this.username,
                            password: this.password
                        })
                        if (status !== 200) return
						if (data.status === true) {
							if(this.isRemember){
								localStorage.setItem('isRemember',this.isRemember);
								localStorage.setItem('username',this.username);
								localStorage.setItem('password',this.password);
							}
							else{
								localStorage.removeItem('isRemember');
								localStorage.removeItem('username');
								localStorage.removeItem('password');
							}
							Utils.setCookie('token', data?.data?.token, 7) // TODO: 先设三天过期
							Utils.setSession('role',data?.data?.school_id)
							Utils.setSession('username',data?.data?.username);
							if(data?.data?.school_id){//学校账号
								this.$router.push("/teacherList");
							}
							else{
								this.$router.push("/schoolList");
							}
						} else {
							this.$message.warning(data?.msg || '登录失败');
						}
                        
                    },
                };
            },

            handler() {
                const self = this;
                return {
                    verifyInput: () => {
                        if (!this.username || !this.username.trim()) {
                            this.$message({
                                message: '请输入账号',
                                type: 'warning',
                            })
                            return false
                        }
                        if (!this.password || !this.password.trim()) {
                            this.$message({
                                message: '请输入密码',
                                type: 'warning',
                            })
                            return false
                        }
                        return true
                    },
                };
            },
        }
    };
</script>

<style scoped lang="less">
    .container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;

        /*    .top {
      height: 95px;
      width: 100%;
      align-items: center;
      display: flex;
      img{
        margin-left: 26%;
        display: inline-block;
      }
    }*/
        .main {
            flex: 1;
			background-color: #D1E5F1;
            // background: url(../assets/images/cms_bg.png) center center fixed;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;

            .login-box {
                width: 371px;
                background-color: #ffffff;
                .title-box-login {
                    background-color: #FF8A00;
                    width: 100%;
                    height: 58px;

                    span.title {
                        margin: 0 21px;
                        line-height: 58px;
                        font-size: 16px;
                        color: #ffffff
                    }
                }

                .edit-main {
                    padding: 18px 17px 28px;

                    .edit-box {
                        display: flex;
                        align-items: center;
                        width: 312px;
                        height: 45px;
                        margin-bottom: 16px;
                        padding: 0 12px;
                        border-radius: 3px;
                        border: 1px solid rgba(32, 53, 128, 0.16);

                        img.icon {
                            width: 17px;
                            margin-right: 14px;
                        }

                        div.boder-one {
                            width: 0px;
                            height: 24px;
                            border-left: 1px solid rgba(216, 221, 233, 1);
                        }

                        input.input {
                            padding: 0 14px;
                            flex: 1;
                            outline: none;
                            border: none;
                            font-size: 12px;
                        }
                    }
					.remember{
						text-align: right;
						margin: 20px 0;
					}
                    .verify-box {
                        position: relative;
                        height: 40px;
                        width: 336px;

                        .edit-box {
                            width: 160px;
                            float: left;
                            display: flex;
                            align-items: center;
                            height: 40px;
                            margin: 0 auto;
                            padding: 0 12px;
                            border-radius: 3px;
                            border: 1px solid rgba(32, 53, 128, 0.16);

                            img.icon {
                                width: 17px;
                                margin-right: 14px;
                            }

                            div.boder-one {
                                width: 0px;
                                height: 24px;
                                border-left: 1px solid rgba(216, 221, 233, 1);
                            }

                            input.input {
                                flex: 1;
                                outline: none;
                                border: none;
                            }
                        }

                        img#code.img-verify {
                            float: left;
                            width: 100px;
                            height: 40px;
                            margin-left: 20px;
                        }
                    }

                    .login-btn {
						border-color: #FF8A00;
                        margin: 20px auto 0 auto;
                        width: 336px;
                        height: 45px;
                        background-color: #FF8A00;
                        border-radius: 3px;
                        color: #ffffff;
                    }
                }
            }
        }

        .foot {
            height: 54px;
            display: flex;
            padding: 27px 0 33px;
            font-size: 14px;
            flex-direction: column;
            align-items: center;

            p:first-child {
                margin: 0;
            }

            p:last-child {
                margin-top: 12px;
            }
        }
    }
</style>
